<template>
	<view class="wrapper">
		<!-- 个人资料 -->
		<view>
			<view class="top">
				<view class="center">
					<view class="center_top">
						<view class="center_img">
							<!-- 这里可以放自己的静态头像 -->
							<image :src="avatar" @click="handleUpImg"></image>
						</view>
						<view class="center_info">
							<view class="center_name">
								<!-- 这里可以放自己的名称图片 -->
								<text>{{ userName }}</text>
							</view>
							<view class="center_vip">
								<text>{{ userAccount }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 统计 -->
		<view class="count">
			<view class="cell" @click="toEventList" link> {{ eventCounts }} <text style="color: #AAAAAA;">今日事件</text>
			</view>
			<view class="cell" @click="toTargetList" link> {{ targetCounts }} <text style="color: #AAAAAA;">目标总数</text>
			</view>
			<view class="cell" @click="toMemoList" link> {{ memoCounts }} <text style="color: #AAAAAA;">今日备忘录</text>
			</view>
		</view>
		<!-- 其它 -->
		<view class="extra">
			<uni-list>
				<uni-list-item showArrow title="个人信息" @click="toUserDetail" link></uni-list-item>
				<uni-list-item showArrow title="事件类型" @click="toUserEventType" link></uni-list-item>
				<uni-list-item showArrow title="事件统计图" @click="toUserEventStatistics" link></uni-list-item>
				<uni-list-item showArrow title="修改密码" @click="toUserChangePassword" link></uni-list-item>
				<uni-list-item showArrow title="退出登录" @click="logout" link></uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
import uniIcons from '../../components/uni-icons/uni-icons.vue';
import uniList from '../../components/uni-list/uni-list.vue';
import uniListItem from '../../components/uni-list-item/uni-list-item.vue';
import uniChat from '../../components/uni-list-chat/uni-list-chat.vue';
import operate from '../../common/operate.js';
import { mapGetters } from "vuex";
export default {
	data() {
		return {
			avatar: '',
			eventCounts: 0,
			targetCounts: 0,
			memoCounts: 0,
		}
	},
	components: {
		uniList, uniListItem, uniChat, uniIcons
	},
	onShow() {
		this.reset()
	},
	computed: {
		...mapGetters(["userName", "userAccount", "userAvatar", "token"])
	},
	methods: {
		async reset() {
			await this.getUserDetail()
		},
		handleUpImg() {// 点击图片区域，选择图片并上传
			uni.chooseImage({// 选择图片
				count: 1,
				success: (res) => {// 图片选择成功的回调（必传），会返回一个对象
					// this.avatar = res.tempFilePaths[0] // 用于更新视图
					uni.uploadFile({
						url: operate.api + "/schedule/user/avatar", // 请求地址
						filePath: res.tempFilePaths[0], // 临时文件路径
						name: "file", // 文件对应的key值
						header: {
							type: "client", // 需要带的请求头，token等等
							Authorization: uni.getStorageSync('token') || this.token
						},
						success: (res) => {// 成功后的回调
							res = JSON.parse(res.data)
							if (res.code == 200) {
								this.$store.dispatch("user/updateToken", {token:res.data})
								this.reset()
							}
						}
					})
				}
			})
		},
		async getUserDetail() {
			await this.$store.dispatch("user/getInfo")
			this.$API.event.getEventCount().then(res => {
				this.eventCounts = res.data
			})
			this.$API.target.getTargetCount().then(res => {
				this.targetCounts = res.data
			})
			this.$API.memo.getMemoCount().then(res => {
				this.memoCounts = res.data
			})
			if (this.userAvatar) {
				this.avatar = this.userAvatar
			}else{
				this.avatar = '../../static/logo.png'
			}
		},
		async logout() {
			await this.$store.dispatch("user/logout")
			uni.redirectTo({
				url: '/pages/login/index'
			});
		},
		toUserEventStatistics() {
			uni.navigateTo({
				url: '/pages/user/eventStatistics/index'
			})
		},
		toUserDetail() {
			uni.navigateTo({
				url: '/pages/user/detail/index'
			})
		},
		toUserEventType() {
			uni.navigateTo({
				url: '/pages/user/eventType/index'
			})
		},
		toUserChangePassword() {
			uni.navigateTo({
				url: '/pages/user/changePassword/index'
			})
		},
		toEventList() {
			uni.switchTab({
				url: '/pages/event/list/index'
			});
		},
		toTargetList() {
			uni.switchTab({
				url: '/pages/target/list/index'
			});
		},
		toMemoList() {
			uni.switchTab({
				url: '/pages/memo/list/index'
			});
		}
	}
};
</script>

<style scoped lang="scss">
Page {
	font-size: 14px;
}

.top {
	width: 100%;
	height: 130px;
	background: #11c53e;
	padding-top: 15px;
	position: relative;
}

.center {
	width: 95%;
	height: 100px;
	background: white;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	border-radius: 5px;
}

.center_top {
	display: flex;
	flex-direction: row;
	width: 80%;
	height: 80px;
	margin: 0 auto;
	margin-top: 20rpx;
	border-bottom: 1px solid #EEEEEE;
}

.center_img {
	width: 66px;
	height: 66px;
	border-radius: 50%;
	overflow: hidden;
}

.center_img image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.center_img .user_head {
	width: 100%;
	height: 100%;
}

.center_info {
	display: flex;
	flex-direction: column;
	margin-top: 20rpx;
	margin-left: 30px;
}

.center_name {
	font-size: 18px;
}

.center_phone {
	color: #BEBEBE;
}

.center_rank {
	width: 50%;
	height: 35px;
	display: flex;
	flex-direction: row;
}

.rank_text {
	height: 35px;
	line-height: 35px;
	margin-left: 10rpx;
	color: #AAAAAA;
}

.center_vip image {
	width: 25px;
	height: 25px;
	margin-top: 15rpx;
}

.vip_icon {
	width: 25px;
	height: 25px;
	margin-top: -10rpx;
}

.vip_text {
	margin-top: -55rpx;
	margin-left: 50rpx;
	color: #AAAAAA;
}

.center_rank image {
	width: 35px;
	height: 35px;
}

.center_score {
	width: 50%;
	height: 35px;
	display: flex;
	flex-direction: row;
}

.center_score image {
	width: 35px;
	height: 35px;
}

.gif-wave {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	z-index: 99;
	mix-blend-mode: screen;
	height: 100rpx;
}

.wrapper {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	background-color: #F4F4F4;
}

.profile {
	height: 375rpx;
	background-color: #ea4451;
	display: flex;
	justify-content: center;
	align-items: center;

	.meta {
		.avatar {
			display: block;
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			border: 2rpx solid #fff;
			overflow: hidden;
		}

		.nickname {
			display: block;
			text-align: center;
			margin-top: 20rpx;
			font-size: 30rpx;
			color: #fff;
		}
	}
}

.count {
	display: flex;
	margin: 0 20rpx;
	height: 120rpx;
	text-align: center;
	border-radius: 4rpx;
	background-color: #fff;

	position: relative;
	top: 10rpx;

	.cell {
		margin-top: 10rpx;
		flex: 1;
		padding-top: 20rpx;
		font-size: 27rpx;
		color: #333;
	}

	text {
		display: block;
		font-size: 24rpx;
	}
}

.orders {
	margin: 20rpx 20rpx 0 20rpx;
	padding: 40rpx 0;
	background-color: #fff;
	border-radius: 4rpx;

	.title {
		padding-left: 20rpx;
		font-size: 30rpx;
		color: #333;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
		margin-top: -30rpx;
	}

	.sorts {
		padding-top: 30rpx;
		text-align: center;
		display: flex;
	}

	[class*="icon-"] {
		flex: 1;
		font-size: 24rpx;

		&::before {
			display: block;
			font-size: 48rpx;
			margin-bottom: 8rpx;
			color: #ea4451;
		}
	}
}

.address {
	line-height: 1;
	background-color: #fff;
	font-size: 30rpx;
	padding: 25rpx 0 25rpx 20rpx;
	margin: 10rpx 20rpx;
	color: #333;
	border-radius: 4rpx;
}

.extra {
	margin: 10rpx 20rpx;
	background-color: #fff;
	border-radius: 4rpx;

	.item {
		line-height: 1;
		padding: 25rpx 0 25rpx 20rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 30rpx;
		color: #333;
	}

	button {
		text-align: left;
		background-color: #fff;

		&::after {
			border: none;
			border-radius: 0;
		}
	}
}

.icon-arrow {
	position: relative;

	&::before {
		position: absolute;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
	}
}
</style>
